import React, { Component } from 'react';
import { Icon } from 'zent';
import 'zent/css/index.css';
import "./SingSong.css"
import bo1 from "../static/bo1.png"
import bo2 from "../static/bo2.png"

class SingSong extends Component {
  constructor(props){
    super(props)
    this.state=({
      songSheet:[],
      Songsheet:[],
      songsheet:[],
      actionsj:null,
      actionsj1:null,
      actionsj2:null,
      mps:null,
      bofang:true,
      bofangall:[],
      bofangallnr:false
    })
  }
  Dd(){
    //像上一级跳转
    this.props.history.go(-1); 
  }
  Dj(item){
    console.log(item);
    let a ={
      name:item.name+"-"+item.ar[0].name,
      id:item.id
    }
    this.state.bofangall.push(a)
    this.setState({
      actionsj:item.al.picUrl,
      actionsj1:item.ar[0].name,
      actionsj2:item.name,
    });
    console.log(this.state.bofangall);
    this.$axios({
      url:"http://localhost:9115/song/url?id="+item.id
    }).then(res=>{
      this.setState({
        mps:res.data[0].url
      })
    })
  }
  bofang(){
    this.setState({
      bofang:!this.state.bofang
    })
    console.log(this.state.bofang);
    var audio = document.getElementById('music1'); 
    if(audio!==null){             
        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
        // alert(audio.paused);
      if(audio.paused)                     {                 
          audio.play();//audio.play();// 这个就是播放  
      }else{
      audio.pause();// 这个就是暂停
      }
    } 
  }
  boall(){
    this.$axios({
      url:"http://localhost:9115/lyric?id=1876446260"
    }).then(res=>{
      console.log(res);
    })
  }
  Djj(item){
    
    this.$axios({
      url:"http://localhost:9115/song/url?id="+item.id
    }).then(res=>{
      this.setState({
        mps:res.data[0].url
      })
    })
  }
  Djjj(){
    this.setState({
      bofangallnr:!this.state.bofangallnr
    })
  }
  render() {
    return (
      <div style={{height:"1000px"}}>
        <div style={{position:"relative",width:"100%",height:"30%"}}>
          <div style={{background:`url(${this.state.songSheet.coverImgUrl}) no-repeat left center/100%`,width:"100%",height:"100%",filter:"blur(20px)",position:'absolute', zIndex:"-1",top:'0',left:'0',right:'0',bottom:'0'}}>
          </div>
          <div className="SS-title" >
              <Icon type="left-circle-o" onClick={this.Dd.bind(this)} />
              <div className="SS-title-name">歌单</div>
          </div>
          <div className="SS-title-nr">
              <img src={this.state.songSheet.coverImgUrl} alt="" style={{width:"40%",height:"40%"}} />
              <div className="SS-title-nr-name">
                <div>{this.state.songSheet.name}</div>
                <div className="SS-title-nr-name2">
                  <img src={this.state.Songsheet.backgroundUrl} alt="" style={{width:"5%",borderRadius:"50%"}} />
                 <div>{this.state.Songsheet.nickname}</div>
                </div>
              </div>
              <div className="SS-title_bottom">
                <div>
                  <Icon type="message-o" />
                  <div>评论</div>
                </div>
                <div>
                  <Icon type="youzan-o" />
                  <div>点赞</div>
                </div>
                <div>
                  <Icon type="plus" />
                  <div>收藏</div>
                </div>
                <div>
                  <Icon type="more" />
                  <div>更多</div>
                </div>
              </div>
          </div>
        </div>
        <div className="SS-body">
          <div className="SS-body-body">
            <div className="SS-body-top" onClick={this.boall.bind(this)}>
              <Icon type="video" className="SS-body-bofang" /><div className="SS-body-top-left">播放全部(共{this.state.songsheet.length}首歌)</div>
            </div>
            <div className="SS-body-top1">
              <div>
                <Icon type="plus" className="SS-body-jiashoucang"/>
              </div>
              <div className="SS-body-top-left">
                收藏({this.state.songSheet.subscribedCount})
              </div>
            </div>
          </div>
          <div>
            {this.state.songsheet.map((item,index)=>{
              return <div className="SS-body-bottom" key={index} onClick={this.Dj.bind(this,item)}>
                <div className="SS-body-bottom-left">
                  {index+1}
                </div>
                <div className="SS-body-bottom-right">
                  <div>
                    {item.name}
                  </div>
                  <div>
                    {item.ar[0].name}-{item.al.name}
                  </div>
                </div>
              </div>
            })}
          </div>
        </div>
        <div style={this.state.actionsj==null?{display:"none"}:{display:"block"}} className="SS-bottom">
            <div style={{display:"flex" }}>
              <div style={{display:"flex", width:"50%",alignItems:"center",justifyContent:"space-around"}}>
                <div style={{width:"30%"}}>
                  <img src={this.state.actionsj} alt="" style={{width:"100%",borderRadius:"50%"}} />
                </div>
                <div style={{width:"70%",overflow:"hidden"}}>
                  <div>
                    {this.state.actionsj2}
                  </div>
                  <div>
                    {this.state.actionsj1}
                  </div>
                </div>
              </div>
              <div style={{textAlign:"right",width:"50%"}}>
               <audio id="music1"
                  // id={`audio${this.props.id}`}
                  src={this.state.mps}
                  autoPlay
      //             preload="true"
    //             onCanPlay={() => this.controlAudio("allTime")}
    //             onTimeUpdate={(e) => this.controlAudio("getCurrentTime")}
                 />
                <img src={this.state.bofang == true?bo1 : bo2} alt="" onClick={this.bofang.bind(this)} style={{width:"20%",display:"inline-block",paddingTop:"10px"}} />
                
                <Icon type="nav-line" onClick={this.Djjj.bind(this)} />
                
              </div> 
            </div>
        </div>
        <div style={this.state.bofangallnr == false?{display:"none"} : {display:"block"}} className="bofangallnr" onClick={this.Djjj.bind(this)} >
          {this.state.bofangall.map((item,index)=>{
            return <div key={index} onClick={this.Djj.bind(this,item)} >
              {item.name}
            </div>
          })}
        </div>
      </div>      
    );
  }
  componentDidMount(){
    let m =localStorage.getItem("kind1")
    console.log(m);
    this.$axios([
      {
        url:"http://localhost:9115/playlist/detail?id="+m
      }
      
    ]).then(res=>{
      console.log(res[0]);
      this.setState({
        songSheet:res[0].playlist,
        Songsheet:res[0].playlist.creator,
        songsheet:res[0].playlist.tracks
      })
      
      console.log(this.state.songSheet.tracks.length);
    }).catch(err=>console.log(err))
  }
}

export default SingSong;